<style lang="scss" scoped>
    .login-bg {
        background: url('../assets/img/login-bg.png');
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
        height: 100%;
    }

    .wrap {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }

    .logo {
        text-align: center;
        padding: 1.68rem 0 1.6rem;
        img {
            height: 1.25rem;
        }
    }

    .login-form {
        width: 81.6%;
        margin: 0 auto;
        font-size: .32rem;
        .form-area {
            position: relative;
            width: 100%;
            height: 4.07rem;
            background:#fff;
            border-radius: .1rem;
            margin-bottom: .8rem;
            padding: .5rem .64rem 0 .64rem;
            h5 {
                font-size: .36rem;
                text-align: center;
                margin-bottom: .5rem;
            }
            input {
                font-size: .26rem;
                float: right;
                outline: none;
                border: 1px solid #E3E3E3;
                border-radius: .05rem;
                height: .7rem;
                line-height: .7rem;
                width: 4.18rem;
                margin-bottom: .3rem;
                text-indent: .2rem;
                &::-webkit-input-placeholder {
                    color: #DEDEDE; 
                    font-size: .24rem;
                }
            }
            .mint-button--small {
                position: absolute;
                right: 0;
                top: 0;
                height: .7rem;
                font-size: .24rem;
                width: auto;
                white-space: nowrap;
                box-shadow: none;
                border: 1px solid #E3E3E3;
                border-radius: 0;
                background-color: #FFF;
                color: #888888;
            }
            .label {
                display: inline-block;
                i{
                    display: block;
                    width: .35rem;
                    height: .35rem;
                    background-image: url('~assets/img/login-icon.png');
                    background-repeat: no-repeat;
                    background-size: 100%;
                    background-position: 1px 0; 
                    &.pw {
                        background-position: 1px 95%;
                    }
                }
                span {
                    font-size: .18rem;
                }
            }
        }
        .mint-button--large {
            height: .9rem;
            font-size: .32rem;
            background: #fff;
            border-radius: .1rem;
            color: #1C93FB;
            box-shadow: .01rem 0 .3rem rgba(28,147,251,0.4);
        }
    }
</style>

<template>
    <div class="login-bg">
        <div class="wrap">
            <div class="logo">
                <img src="../assets/img/logo.png" alt="">
            </div>
            <div class="login-form">
                <div class="form-area">
                    <h5>登录</h5>
                    <div class="clearfix">
                        <div class="label">
                            <i></i>
                            <span>账号</span>
                        </div>
                        <input @click="scrollView" placeholder="请输入用户名" name="username" v-model="username" v-vuerify="'username'">
                    </div>
                    <div class="clearfix">
                        <div class="label">
                            <i class="pw"></i>
                            <span>密码</span>
                        </div>  
                        <input @click="scrollView" type="password" name="password" placeholder="请输入密码" v-model="password" v-vuerify="'password'">
                        <!-- <input type="hidden" name="kind" value="mobile"> -->
                        <!-- <input @click="scrollView" placeholder="请输入您的验证码" v-model="verifycode" v-vuerify="'verifycode'">
                        <mt-button  type="default" size="small" :disabled="!showGetCodeBtn" @click="getVerifyCode">
                            <span v-show="showGetCodeBtn">发送验证码</span>
                            <span v-show="!showGetCodeBtn">{{ verifyCodeCount }}s</span>
                        </mt-button> -->
                    </div>
                </div>
                <mt-button type="default" size="large" @click="handleSubmit">确定</mt-button>
                <!-- <input type="submit" value="确定"> -->
            </div>
        </div>
        
    </div>
</template>

<script>
    import { MessageBox } from 'mint-ui'

    const TIME_COUNT = 60;
    export default {
        data() {
            return {
                username: '',
                password: '',
                verifycode: '',
                verifyCodeCount: '',
                showGetCodeBtn: true,
                timer: null
            }
        },
        vuerify: {
            username: 'required',
            password: 'required',
            // verifycode: 'required',
        },
        methods: {
            scrollView(ev) {
                var offsetTop = $(ev.target).offset().top +  $(".wrap").scrollTop()
                setTimeout(() => {
                    $(".wrap").animate({scrollTop: offsetTop - 90 + "px"}, 500);
                }, 300)
            },
            getVerifyCode() {
                this.$http.get('/getVerifyCode').then(res => {
                    if (!this.timer) {
                        this.verifyCodeCount = TIME_COUNT;
                        this.showGetCodeBtn = false;
                        this.timer = setInterval(() => {
                            if (this.verifyCodeCount > 0 && this.verifyCodeCount <= TIME_COUNT) {
                                this.verifyCodeCount--;
                            } else {
                                this.showGetCodeBtn = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000)
                    }
                }).catch(err => {
                    MessageBox.alert('获取验证码失败', '提示')
                })
            },
            handleSubmit() {

                if (this.$vuerify.check()) { 
                    this.$http({
                        url: '/api/device/login',
                        method: 'post',
                        data: JSON.stringify({
                            username: this.username,
                            password: this.password,
                            kind: 'mobile'
                        }),
                        headers: { 
                            "Content-Type": 'application/json;charset=UTF-8' 
                        }
                    }).then(res => {
                        this.$router.push('/homepage')
                    }).catch(err => {
                        MessageBox.alert(err.response.data.message, '提示')
                    }).then(() => {
                        this.$router.push('/homepage')
                    })
                } else {
                    if(this.username === '') {
                        MessageBox.alert('请输入账号', '提示')
                    } else if(this.password === '') {
                        MessageBox.alert('请输入验证码', '提示')
                    }
                }
            }
        }
    }
</script>

